TypeScript基础快速上手

//基础类型
(()=>{//布尔类型console.log("###########布尔类型###########")//基本语法//let 变量名:数据类型 = 值let flag:boolean=trueflag=false//flag=10 会报错因为只能定义为布尔值console.log(flag)//数字类型console.log("#########数字类型#############")let a1: number = 10 // 十进制let a2: number = 0b1010  // 二进制let a3: number = 0o12 // 八进制let a4: number = 0xa // 十六进制//a1='哈哈' 报错，只能改为数字类型，下面的以此类推console.log(a1)console.log(a2)console.log(a3)console.log(a4)//字符串类型console.log("###########字符串类型###########")let name:string = 'tom'name = 'jack'
// name = 12 // errorlet age:number = 12const info = `My name is ${name}, I am ${age} years old!`console.log(info)/* 总结：ts中变量开始是什么类型，那么后面赋值的时候，只能用这个类型的数据，是不允许用其他类型的数据赋值给当前这个变量中*///undefined 和 null 类型console.log("##########undefined 和 null 类型############")let u: undefined = undefinedlet n: null = nullconsole.log(u)console.log(n)let w:number = undefinedconsole.log(w)/*默认情况下 null 和 undefined 是所有类型的子类型。就是说你可以把 null 和 undefined 赋值给 number 类型的变量。*///数组类型console.log("############数组类型##########")//let 变量名:数据类新[] = [值1，值2]let list1: number[] = [1, 2, 3]console.log(list1)//数组定义方式2：泛型写法//let 变量名:Array<数据类型> = [值1，值2]let list2: Array<number> = [1, 2, 3]// let list2: Array<number> = [1, 2, 3,'a']//Errorconsole.log(list2)/*注意问题：数组定义后，里面的数据类型必须与定义数组的时候的类型一致 *///元组类型console.log("#########元组类型#############")let t1: [string, number]t1 = ['hello', 10.13214] // OK// t1 = [10, 'hello'] // Errorconsole.log(t1) // OK// console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法/*//注意：元组类型在使用的时候，数据的类型位置和数据个数，应该与定义元组的时候的数据类新和位置应该一致*/console.log(t1[0].split(""))console.log(t1[1].toFixed(2))//枚举类型//枚举类型:枚举类型里面的每个数据值都可以叫元素，每个元素都有编号，从0开始，依次递增console.log("#########枚举类型#############")enum Color {Red,Green,Blue}// 枚举数值默认从0开始依次递增// 根据特定的名称得到对应的枚举数值let myColor: Color = Color.Green  // 0console.log(myColor, Color.Red, Color.Blue)console.log(Color[2])//小例子,枚举中的元素可以是中文的数据值，但是不推荐/*enum Gender {女,男}console.log(Gender.男)*//*枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：*/enum color {red = 1, green, blue}let colorName: string = color[2]console.log(colorName)  // 'Green'/*默认情况下，从 0 开始为元素编号。 你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 1 开始编号：enum Color {Red = 1, Green, Blue}let c: Color = Color.Green或者，全部都采用手动赋值：enum Color {Red = 1, Green = 2, Blue = 4}let c: Color = Color.Green*///any 类型//可包含不同的类型的数据console.log("######### any类型 #############")let notSure: any = 4notSure = 'maybe a string'notSure = false // 也可以是个 booleanconsole.log(notSure)/*在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any 类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：*///当一个数据中存储多个数据，类型不确定个数不确定时，也可以用any类型let list: any[] = [1, true, 'free']list[1] = 100console.log(list)//void类型/*某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：*/console.log("######### void类型 #############")/* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 *///在函数声明时的小括号后面加上 :void 表示该函数没有返回值，就算设置返回值也会是undefinedfunction fn(): void {console.log('只要富婆把握住，连夜搬进大别墅')// return undefined  //返回undefined// return null      //返回null// return 1 // error}fn()/* 声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：*/let unusable: void = undefinedconsole.log(unusable)//object类型//object 表示非原始类型，也就是除 number，string，boolean之外的类型。console.log("######### object类型 #############")//定义一个函数，参数是object，返回值也是objectfunction fn2(obj:object):object {console.log('fn2()', obj)return {name:'阿达西哇',age:14}// return undefined// return null}// console.log(fn2({ name:'阿达西哇', age:14}))// console.log(fn2(new String('abc')))// console.log(fn2('abc') // errorconsole.log(fn2(String))//联合类型// 联合类型（Union Types）表示取值可以为多种类型中的一种// 需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值console.log("######### 联合类型 #############")function toString2(x: number | string) : string {return x.toString()}console.log(toString2(123))//类型断言，告诉编译器，我知道我是什么类型的，也知道自己在干嘛console.log("######### 类型断言 #############")//类型断言有两种形式。// 其一是“尖括号”语法:<类型>变量名// 另一个为 as 语法:值 as 类型//需求2: 定义一个一个函数得到一个数字或字符串值的长度function getLength(x: number | string) {// return x.length // errorif ((<string>x).length) { // error//str存在吗，如果存在说明x是string类型// return (<string>x).lengthreturn (x as string).length} else {//如果是number则用toString转换为string类型return x.toString().length}}console.log(getLength(11231))console.log(getLength("dajdhsajfkh"))//类型推断：TS会在没有明确的指定类型的时候推测出一个类型console.log("######### 类型推断 #############")/*类型推断: TS会在没有明确的指定类型的时候推测出一个类型有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型.2. 定义变量时没有赋值, 推断为any类型*//* 定义变量时赋值了, 推断为对应的类型 */let b9 = 123 // 推断出为number类型// b9 = 'abc' // errorconsole.log(b9)/* 定义变量时没有赋值, 推断为any类型 */let b10  // 没有赋值推断为 any类型b10 = 123b10 = 'abc'console.log(b10)})()

TypeScript基础快速上手相关推荐

Vue-cli 3.X 构建工具零基础快速上手
文章目录一.环境准备 1. 安装node 2. 配置镜像二.安装Vue CLI 2.1. 查看当前vuecli版本 2.2. 安装最新版本 2.3. 安装指定版本三.创建web项目 3.1. 指 ...
零基础快速上手CANoe
零基础快速上手CANoe 前言什么是CANoe CANoe的工作原理一. 如何新建一个工程二. 如何发送报文 2.1 尝试发送报文 2.2 DBC文件的使用三. 报文的录制与回放 3.1 使用 ...
Premiere 零基础快速上手教程
关注并星标"高级农民工" 回复"视频"可获取视频剪辑软件和教程在前几天的文章中,我分享了几款主流视频剪辑软件: 最主流的视频剪辑软件简单来说就是,手机端用「 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [014]view和text组件和动画使用常见的尺 ...
Excel之VLOOKUP函数（零基础快速上手）
目录 VLOOKUP介绍 VLOOKUP快速上手需求描述需求实现常见问题问题一: 问题二: 问题三: VLOOKUP介绍 VLOOKUP函数是Excel中的一个纵向查找函数,在工作中都有广泛应 ...
Three.js 入门2 零基础快速上手（地球和月亮示例）
threejs官网:https://threejs.org/ 版本更迭很快,我用的r104 复制粘贴出效果 <!DOCTYPE html> <html> <head> ...
Git | 一文带你零基础快速上手Git
快速上手 TypeScript
快速上手 TypeScript ypeScript 简称 TS ,既是一门新语言,也是 JS 的一个超集,它是在 JavaScript 的基础上增加了一套类型系统,它支持所有的 JS 语句,为工程化开 ...
什么是 TypeScript ? 快速上手 TypeScript
什么是 TypeScript ? TypeScript是一种由微软开发的开源编程语言,它是JavaScript语言的一个超集,支持JavaScript中的所有语法和特性,并在此基础上添加了一些新的特性 ...

TypeScript基础快速上手

TypeScript基础快速上手相关推荐

最新文章

热门文章