一、概述
Microsoft 2012年推出
类型错误
是一个在代码运行之前运行的工具(静态编译)
ECMAScript是JS的标准、TS是JS的超集
类型检查
优化编译
// 解决TS和JS冲突问题
1.tsc --init
// 自动编译
2.tsc --watch
// 降级编译
{
"compilerOptions": {
"target": "es5"
}
}
// 严格模式
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"
}
}
数组:type[]、Array<type>
类型别名(给类型定义一个名字,用这个名字来代替定义的类型)
// 扩展接口
interface IAnimal {
name: string
}
interface IDog extends IAnimal {
bark: string
}
type Animal = {
name: string
}
type Dog = Animal & {
bark: string
}
// 向现有的类型添加字段
interface IPerson {
name: string
}
interface IPerson {
age: number
}
类型断言
1.const myCanvas1 = document.getElementById("canvasId") as HTMLCanvasElement
2.const myCanvas2 = <HTMLCanvasElement>document.getElementById("canvasId")
function request(url: string, method: 'GET' | 'POST') { }
// 方式一
const params = {
url: 'www.baidu.com',
method: 'GET' as 'GET'
}
request(params.url, params.method)
// 方式二
const params = {
url: 'www.baidu.com',
method: 'GET'
}
request(params.url, params.method as 'GET')
// 方式三
const params = {
url: 'www.baidu.com',
method: 'GET'
} as const
request(params.url, params.method)
枚举:一组命名常量
bigint:非常大的整数
symbol:全局唯一引用
// "target": "es2020"
const a: bigint = BigInt(100)
const b: bigint = 100n
in操作符缩小:"value" in x
type Fish = {
swim: () => void
}
type Bird = {
fly: () => void
}
function move(animal: Fish | Bird) {
if ('swim' in animal) {
return animal.swim()
}
return animal.fly()
}
type DescribabletionFunction = {
describe: string
(someArg: number): boolean
}
function doSomething(fn: DescribabletionFunction) {
console.log(fn.describe)
console.log(fn(10))
}
// 泛型函数-限制条件
function longest<T extends { length: number }>(a: T, b: T) {
if (a.length > b.length) {
return a
} else {
return b
}
}
unknown:代表任何值,这与any类型类似,但更安全,因为对未知unknown值做任何事情都是不合法的
注
@千(gysr)[22]【b-qfjy】