TypeScript 基础
TypeScript 基础类型
1. Boolean 类型
let isDone: boolean = false
2. Number 类型
let count: number = 10
3.String 类型
let name:string = "typScript"
4. Array 类型
let list: Array<number> = [3,2,1]
或
let list: number[] = [3,2,1]
5. Enum 类型
enum Enum {
A,
B,
C = "C",
D = 6,
E,
}
console.log(Enum.D) //6
// 扩展: 将D=6 换成 D="6" 试试看.
6. Any 类型(任何类型) //所有类型都可以赋值为 any 类型
let age: any = 24
age = '24'
age = ['24']
7. Tuple 类型(元组)
let ages :[number, string] = [10, '24']
8.Never 类型(不存在的类型)
function error(msg: string): neverFun {
throw new Error(msg)
}
9.Null 和 Undefined 类型
let u: undefined = undefined
let n: null = null
TypeScript 接口
1.例子
interface Person {
name: string;
age: number;
}
let xiaogu: Person = {
name: "谷爱凌",
age: 18
}
2. 只读属性(readonly) 和 可选(?)
interface Person {
readonly name: string
age?: number
}
3.
interface Person {
[x: string]: string
}
TypeScript 断言
let age = 12 as number
类型守卫
1. in 关键字
interface User {
name: string,
age: number
}
interface Like {
like: string,
}
type type = User | Like
function getUser(user: type) {
if ("name" in user) {
console.log("name: " + user.name);
} else {
console.log("没有name属性");
}
}
getUser({name: '谷爱凌', age: 18}) // name: 谷爱凌
getUser({like:'滑雪'}) //"没有传入name属性
2.typeof 关键字
function getUser(age: number | string) {
if (typeof age === "number") {
console.log("传入的是number类型age: "+age);
} else {
console.log("传入的是string类型age: "+age);
}
}
getUser(18) //传入的是number类型age: 18
getUser('18') //传入的是string类型age: 18
联合类型
interface A {
a: string
}
interface B {
b: string
}
type C = A | B // 联合类型A,B
let obj:C = { a: "小a", b: "小b" }
类型别名
type String = string
let name:String = '123'
交叉类型
interface A {
a: number
}
interface B {
b: number
}
type C = A & B
let c:C = { a:12, b:12 }
let c:C = { a:12 } // 会报错
TypeScript 函数
1. 参数类型和返回类型
function getInfo(name: string, id: number): string {
return name + id;
}
2. 可选参数及默认参数
function getInfo(name: string, id?: number): string {
return name + id;
}
工具类型
1. typeof (可以用来获取一个变量或对象的类型)
const xiaogu = {
name: "谷爱凌",
age: 18,
address: {
province: '上海',
city: '黄浦区'
}
}
----
type daGu = typeof xiaogu;
等于
interface daGu = {
name: string;
age: number;
address: {
province: string;
city: string;
};
}
2.keyof
interface User {
name: string,
age: number
}
type K1 = keyof User // type K1 = "name" | "age"
3.in(遍历)
type Keys = "a" | "b" | "c"
type Obj = {
[p in Keys]: number
}
// { a: number, b: number, c: number }
4.extends (继承)
interface Person {
name: string
}
interface User extends Person {
age: number
}
let xiaogu:User = { name:'谷爱凌', age:18}
5.Partial (将某个类型里的属性全部变为可选项 `?`)
interface Person {
name: string,
age:number,
sex: string
}
let xiaogu:Partial<Person> = { name:'谷爱凌', age:18}
解释:
Partial<Person> 等于 interface Person { name?: string, age?:number, sex?: string }
6.Required (将某个类型里的属性全部变为必选项)
interface Person {
name?: string,
age?:number,
sex?: string
}
let xiaogu:Required<Person> = { name:'谷爱凌', age:18}
解释:
Required<Person> 等于 interface Person { name: string, age:number, sex: string }
7. Readonly (将某个类型里的属性全部变为只读属性)
interface Person {
name: string,
age:number,
sex: string
}
let xiaogu:Readonly<Person> = { name:'谷爱凌', age:18}
解释:
Readonly<Person>
等于
interface Person {
readonly name: string,
readonly age:number,
readonly sex: string
}
8. Pick (将某个接口类型(interface)中的属性挑出来)
interface Person {
name: string,
age:number,
sex: string
}
type NameAndAge = Pick<Person, "name" | "age">
let xiaogu:NameAndAge = { name: "谷爱凌", age: 18 }
9.Omit(将某个接口类型(interface)中的属性移除掉)
interface Person {
name: string,
age:number,
sex: string
}
type NameAndAge = Omit<Person, "sex" >
let ww:NameAndAge = { name: "谷爱凌", age: 18,}
10. Exclude (将某个类型中(type)的属性移除掉)
type Name = "武大靖" | "谷爱凌" | "苏翊鸣"
type Name2 = Exclude<Name, "武大靖" | "苏翊鸣">
let xiaogu:Name2 = "谷爱凌"
11. Extract (将某个类型(type)中的属性提取出)
type Name = "武大靖" | "谷爱凌" | "苏翊鸣"
type Name2 = Extract<Name, "谷爱凌" >
let xiaogu:Name2 = "谷爱凌"
类型提取
interface DaGu = {
name: string;
age: number;
address: {
province: string;
city: string;
};
}
type xiaogu = DaGu["address"]
TS中的符号
1. ! 非空断言操作符(忽略 undefined 和 null 类型)
let t: string | null | undefined
let username: string = t!
type Fun = () => string
function getUser(getName: Fun | undefined) {
getName!()
}
2. ?. 可选元素访问
let arr:{names?: string}[] = []
console.log(arr[1].names) // Cannot read property 'names' of undefined
console.log(arr[1]?.names) // undefind
// 可选链与函数调用
let result = obj.getUser?.()
3. ?? 空值合并运算符
??(左边为null, undefined,执行右边), ||(左边为falsy,执行右边) 区别
console.log(null ?? "??前没有值") //??前没有值
console.log(null || "||前没有值") //||前没有值
console.log(undefined ?? "??前没有值") //??前没有值
console.log(undefined || "||前没有值") //||前没有值
console.log(0 ?? "??前没有值") //0
console.log(0 || "||前没有值") //||前没有值
console.log(false ?? "??前没有值") //false
console.log(false || "||前没有值") //||前没有值
console.log('' ?? "??前没有值") //''
console.log('' || "||前没有值") //||前没有值
console.log(NaN ?? "??前没有值") //NaN
console.log(NaN || "||前没有值") //||前没有值
同时使用时要表明优先级
(null || undefined ) ?? "没有值";
