一.
动态类型语言 运行时才进行数据类型检查 静态类型语言 编译阶段才进行数据类型检查
TS的优势 程序更容易理解 效率更高 更少的错误
安装
小demo:试试传入错误的参数
二.原始数据类型和Any类型
let isDone: boolean = false;
let age: number = 20
let firstName: string = 'lyt'
let message: string = `hello ${firstName}`
let u: undefined = undefined
let n: null = null
let notSure: any = 4
notSure = 'maybe a string'
notSure = true
notSure.name
notSure.getName()
三.数组和元组
//数组
let arrOfNumbers: number[] = [1, 2, 3, 4]
arrOfNumbers.push(5)
//类数组
function test() {
console.log(arguments)
arguments.length
}
//元组
let user: [string, number] = ['lyt', 20]
user.push('123')
user.push(123)
四.Interface 接口
对对象的到底是什么样的进行描述，对属性进行描述 Duck Typing
interface Person {
readonly id: number;
name: string;
age?: number;
}
let lyt: Person = {
id: 1,
name: 'lyt'
}
五.Function函数
function add(x: number, y: number, z?: number): number {
if (typeof z === 'number') {
return x + y + z
}
else {
return x + y
}
}
add(1, 2)
const add2 = (x: number, y: number, z?: number): number => {
if (typeof z === 'number') {
return x + y + z
}
else {
return x + y
}
}
//let定义函数
let add3:(x:number,y:number,z?:number)=>number=add
//interface定义函数
interface ISum{
(x:number,y:number,z?:number):number
}
六.类型推论
上一节的const定义函数，并没有说明add2是函数，但是被正确识别成函数了
const add2 = (x: number, y: number, z?: number): number => {
if (typeof z === 'number') {
return x + y + z
}
else {
return x + y
}
}
TS在没有定义类型的时候会自动推测出类型
let str = 'str'
//联合类型
let numberOrString: number | string
numberOrString = 'abc'
numberOrString = 123
//只能访问联合类型的共有属性或者方法
numberOrString.toString()
//类型断言
function getLength(input: string | number): number {
const str = input as string
if (str.length) {
return str.length
}
else {
const number = input as number
return number.toString().length
}
}
//类型守护
function getLength2(input: string | number): number {
if (typeof input === 'string') {
return input.length
}
else {
return input.toString().length
}
}
七.枚举
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
const value = 'UP'
if (value === Direction.Up) {
console.log('go up!');
}
常量枚举：
const enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
const value = 'UP'
if (value === Direction.Up) {
console.log('go up!');
}
生成的js文件：
var value = 'UP';
if (value === "UP" /* Direction.Up */) {
console.log('go up!');
}
八.泛型
typescript最难的点
用来创建特定类型的容器，给容器贴了一个标签； 更灵活地约束类型（有某种属性，方法就可以）；
看成是一个占位符，在使用的时候才填入具体是什么类型
function echo<T>(arg: T): T {
return arg;
}
const result = echo('str')
const result2 = echo(123)
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]]
}
const result3 = swap(['string', 123])
约束泛型：要满足extends后面的interface约束条件，而不是想传入啥就传入啥
function echoWithArr<T>(arg: T[]): T[] {
console.log(arg.length);
return arg;
}
//传入的参数必须是数组
const arrs = echoWithArr([1, 2, 3])
interface IWithlength {
length: number
}
function echoWithLength<T extends IWithlength>(arg: T): T {
console.log(arg.length);
return arg;
}
//只要有length属性就可以
const str1 = echoWithLength('str')
const obj = echoWithLength({ length: 10, width: 10 })
const srr2 = echoWithLength([1, 2, 3])
泛型在类上面的使用：
使用类的时候再定义类型
pop的时候如果传入错误的类型的话，就会给我们提醒
class Queue<T> {
private data: T[] = [];
push(item: T) {
return this.data.push(item)
}
pop() {
return this.data.shift()
}
}
const queue = new Queue<number>()
queue.push(1)
const poped = queue.pop()
if (poped) {
poped.toFixed()
}
接口和数组
interface KeyPair<T, U> {
key: T;
value: U;
}
let kp1: KeyPair<number, string> = { key: 1, value: 'str' }
let key2: KeyPair<string, number> = { key: 'str', value: 2 }
let arr: number[] = [1, 2, 3]
let arrTwo: Array<number> = [1, 2, 3]
九.类型别名type-alias
type PlusType = (x: number, y: number) => number
let sum: PlusType
const res1 = sum(1, 2)
//组合类型
type StrOrNumber = string | number
let res2: StrOrNumber = '123'
res2 = 123
const str: 'name' = 'name'
const number: 1 = 1
//字符串字面量类型
type Directions = 'Up' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'Up'
//交叉类型
interface IName {
name: string
}
type IPerson = IName & { age: number }
let person: IPerson = { name: '123', age: 123 }
十.声明文件
axios.ts:
//没有代码是实现，只有类型声明
// declare function axios(url: string): string
interface IAxios {
get(url: string): string
post: (url: string, data: any) => string
}
declare const axios: IAxios
declaration-files.ts:
axios.get('url')
axios.post('url', { name: 'lyt' })
实际使用可以不用都声明，可以使用第三方库
安装axios npm install axios --save
我们可以在@type中写自己的定义文件，写自己定义的第三方库
