TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,意味着所有的 JavaScript 代码都是合法的 TypeScript 代码。TypeScript 添加了静态类型、类、接口等特性,以提供更强大的工具和语言特性,同时仍然可以编译为纯 JavaScript 代码。
以下是 TypeScript 的一些主要特性:
- 静态类型:TypeScript 支持静态类型,这意味着可以在编码阶段就发现潜在的类型错误,提高了代码的可靠性和可维护性。
- 类和接口:TypeScript 提供了面向对象编程的特性,包括类和接口,使得代码更易于组织和重用。
- 泛型:TypeScript 支持泛型,可以编写更加灵活和通用的代码。
- ES6+特性支持:TypeScript 支持 ECMAScript 6 及更新版本的语法和特性,如箭头函数、模板字符串、解构赋值等。
- 编译:TypeScript 代码需要被编译为 JavaScript 代码才能在浏览器或 Node.js 等环境中运行。TypeScript 提供了强大的编译器,可以将 TypeScript 代码转换为 JavaScript 代码。
- 工具支持:TypeScript 集成了丰富的工具支持,包括编辑器插件、构建工具等,使得开发者可以更高效地编写和维护代码。
TS 的基本使用
TS 最重要的就是给每一变量添加对应的类型,当添加上对应的类型,就无法赋予其他的类型 语法
//let/const/var 变量名:数据类型 = 变量值
let str1: string = 'qwe'
// 这里我们可以借助 第三方包帮我们 运行代码
// ts-node : 可以帮助我们完成自动编译
// 安装 ts-node : npm i ts-node -g
// 这个只会帮助我们 自动编译 并不会 生成 js 文件
对象类型的书写形式
interface Iobj {
name: string;
age: number;
info: {
msg: string;
num: number;
};
}
let obj: Iobj = {
name: '张三',
age: 120,
info: {
msg: 'sad',
num: 100
}
}
obj.info.num = 110
console.log(obj.info.msg)
console.log(obj.info.num)
console.log(obj.info)
数组形式的书写形式
interface Iarr2 {
id: number;
name: string;
}
const arr1: (number | string)[] = [1, '数据1', 3]
// 数组泛型
const arr3: Array<Iarr2> = [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
{
id: 3,
name: '王五'
},
]
type 类型
type TStr1 = 'nan' | 'yu' | 'shang' | 'qing' | 'tian'
type TObj1 = {
id: number;
name: string;
}
let str1: TStr1 = 'nan'
str1 = "shang"
const obj1:TObj1 = {
id: 1,
name: '张三'
}
obj1.id = 12
console.log(str1)
函数类型
// 无参无返
function fna(): void {}
// 无参有返
function fnb(): number {
return 123
}
// 有参无返
function fnc(a: number,b: string) {
}
// 有参有返
function fn(a: number, b: string): number {
return a
}
// 赋值式 函数
// 无参无返
const msg: () => void = function(): void {
}
// 有参无返
const msg1: (a: number, b: number) => void =
function (a: number, b: number): void {
}
// 无参有返
const msg2: () => number = function (): number {
return 123
}
// 有参有返
const msg3: (a: number, b: number) => number =
function (a: number, b: number): number {
return a + b
}
// 箭头函数
const msg4: (a: number, b: number) => number = (a: number, b: number): number
=> a + b
枚举
enum Emsg {
a = 'sda',
b = 'da',
c = 'sad',
d = 'sadaj'
}
let es: Emsg = Emsg.a
console.log(es)
enum Esum {
a = 100,
b,
c,
d
}
console.log(Esum.a) // 100
console.log(Esum.b) // 101
console.log(Esum.c) // 102
console.log(Esum.d) // 103
enum Esum1 {
a,
b,
c,
d
}
console.log(Esum1.a) //0
console.log(Esum1.b) //1
console.log(Esum1.c) //2
console.log(Esum1.d) //3
接口合并
interface Iobj {
id: number,
name: string,
}
interface Iobj {
age: number
text?: string
}
const obj1: Iobj = {
id: 12,
name: '张三',
age: 18,
text: '我是obj'
}
console.log(obj1)
泛型
function createArr<T>(length: number, value: T): T[] {
let arr:T[] = []
for(let i = 0; i < length; i++) {
arr.push(value)
}
return arr
}
const str1:string[] = createArr<string>(2, '123')
console.log(str1)
interface IStr2 {
name: string
}
const str2: IStr2[] = createArr<IStr2>(3, { name: '张三' })
console.log(str2)
str2[0].name = '123'
console.log(str2)
总的来说,TypeScript 是一种功能丰富的编程语言,它通过添加静态类型和其他特性,提供了更加强大和可靠的开发体验,同时仍然保留了 JavaScript 的灵活性和广泛的生态系统。