TypeScript基础类型
string、number、bolean
直接在变量后面添加即可。
let myName: string = 'Tom'function sayHello(person: string) {return 'hello,' + person
}
let user = 'Tom'
let array = [1, 2, 3]
console.log(sayHello(user))function greet(person: string, date: Date): string {console.log(`hello,${person},today is ${date.toDateString()}`)let words = `hello,${person},today is ${date.toDateString()}`return words
}
greet('Tom', new Date())
any类型
可以随意赋值给any类型的变量。
还可以把any类型的变量当成方法调用。
let obj: any = { x: 0 }
obj.foo()
obj()
obj.bar = 0
obj = 'number'
const n: number = obj
let myName: string = 'Tom'
promise类型
下面返回的34不是普通的number类型，而是Promise类型的number
const geetNumber = async (): Promise<number> => {return 34//表示34不是普通的number类型，而是Promise类型的number
}
可选参数
可选参数未收到传参值时，是undefined，因此使用可选参数时，建议判断可选参数是否为undefined。
const printName = (person: { first: string; last?: string }): string => {//可选属性person.last可能为undefined，使用之前要判断是否为undefinedif (person.last !== undefined) {return person.first + person.last}return person.first + '先生/女生'
}
printName({ first: 'x', last: 'yy' })
printName({ first: 'x' })
联合类型 |
使用联合类型时，只能使用联合类型成员共有的方法。
比如toUpperCase()是string才有的方法，下面的联合类型由number和string构成，是不能使用toUpperCase()的。
解决办法：使用if else特判参数的类型。
//联合类型 |符号连接
function printId(id: number | string) {console.log('your id is' + id)
}
printId(111)
printId('111')
// printId({ id: 111 })error
使用type为类型取别名
type Point = {//需要使用等于号x: numbery: number
}
function printPoint(pt: Point) {console.log(pt.x, pt.y)
}
任意类型都可以使用type取别名。
接口定义类型
interface Point2 {//不要等于号，是一个对象x: numbery: number
}
function printPoint2(pt2: Point2) {console.log(pt2.x, pt2.y)
}
type和接口定义类型的区别
interface 的几乎所有功能都在 type 中可用，主要区别在于无法重新打开类型以添加新属性，而接口始终可扩展。
interface扩展接口 extends
interface Animal {name: string;
}
//bear是在extends了Animal基础上扩展了一个类型对象
interface Bear extends Animal {honey: boolean;
}
const bear = getBear();
bear.name;
bear.honey;
type扩展类型 &
type Animal = {name: string;
}
//bear是在Animal基础上再&一个类型对象进来
type Bear = Animal & { honey: boolean;
}
const bear = getBear();
bear.name;
bear.honey;
向现有接口添加字段
interface Window {title: string;
}
interface Window {ts: TypeScriptAPI;
}
const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});
类型创建后无法更改
type Window = {title: string;
}
type Window = {ts: TypeScriptAPI;
}// Error: Duplicate identifier 'Window'.
类型断言 as
假设你写了一条语句，TypeScript不一定知道那条语句返回什么，但你可能知道，你就能使用as断言那条语句返回值的类型。
const myDiv = document.getElementById('div') as HTMLDivElement
也可以使用尖括号语法（除非在.tsx文件中）
const myButton = <HTMLButtonElement>document.getElementById('btn')
因为类型断言在编译时被删除，所以没有与类型断言关联的运行时检查。如果类型断言错误，则不会产生异常或 null。
类型断言只能断言为更具体的或者更不具体的内容
而不能做可能的强制断言。
有时，合理的转换也会因为这个规则被报错，这时，可以先将类型推断为any或unknown再推断为别的类型。
const x = 'hello' as any as number
字面类型：特定的字符串和数字
字面类型：在类型位置引用特定的字符串和数字。
let和var创建的变量都是可以更改的，但const创建的不能更改。
争对const变量不能被赋值，但是又有几种可能情况时，我们就可以使用字面变量。
function setSize(size: 'large' | 'default' | 'small') {return size
}
function compare(a: string, b: string): -1 | 0 | 1 {return a === b ? 0 : a > b ? 1 : -1;
}
也可以与非字面量一起使用。
interface Options {width: number
}
function choose(op: Options | 'auto') {
}
choose({width:6})
choose("auto")
choose("autoWidth")//error
两种布尔字面类型：true和false，类型Boolean实质上就是这两种布尔字面类型联合起来的。
字面推断
下面这个对象中的counter自动被推断为number类型。
同理，在一个对象中，值为string的属性也会被推断为string。而string类型和字面类型的string是不一样的，直接将string类型参数赋值给字面类型的参数将会报错。
下面的代码中req.method是string类型，而handleRequest中第二个参数是字面类型。那样写会报错。
declare function handleRequest(url: string, method: 'GET' | 'POST'): void
const req = { url: 'https://example.com', method: 'GET' }
handleRequest(req.url, req.method)
//error,req.method是string类型，而handleRequest中第二个参数是字面类型。
解决这个问题有两个方法：
1、给传递过去的参数类型断言
const req = { url: 'https://example.com', method: 'GET' as 'GET' }或者
handleRequest(req.url, req.method as 'GET')2、用as const将整个对象参数转换为const类型
as const会为对象的所有属性分配字面类型。
null和undefined
JavaScript 有两个基础值用于表示值不存在或未初始化的值：null 和 undefined。
TypeScript 有两个对应的同名类型。这些类型的行为取决于你是否启用了 strictNullChecks 选项。
strictNullChecks关闭
可能是null或undefined的值可以正常访问，可以赋值给任何类型的属性。
strictNullChecks开启
建议在对该值使用方法或属性之前测试这些值。
function doSomething(x: string | null) {if (x === null) {// do nothing} else {console.log("Hello, " + x.toUpperCase());}
}
非空断言运算符 !
x的值可能为null，在调用x时，我们在其后方添加了一个！号断言他不为空，就可以使用number类型的方法toFixed()，这个做法可以跳过ts报错，但是可能会带来运行时错误。
function liveDangerously(x?: number | null) {// No errorconsole.log(x!.toFixed())
}
枚举
描述一个值，该值可能是一组可能的命名常量之一。
bigInt
const anotherHundred: bigint = 100n;
symbol
用来创建一个独一无二的值，可以用作对象的属性名，保证属性名的唯一性。