带你入门TypeScript

最新推荐文章于 2023-12-05 17:00:54 发布
最新推荐文章于 2023-12-05 17:00:54 发布
阅读量299 收藏 1
点赞数 1
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64784735/article/details/127755211
版权

一.为何学习TS

1.TypeScript 在社区的流行度越来越高，它非常适用于一些大型项目，也非常适用于一些基础库，极大地帮助我们提升了开发效率和体验。

2.TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的 JavaScript 引擎中。

3.强大的类型系统  允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

4.TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性。

二.配置TS环境

1.安装好node

2.

# 安装
cnpm install typescript -g

# 查看版本号
tsc --version
tsc -v

3.node环境下执行Ts文件

// 1- 全局安装ts-node
cnpm install ts-node -g

// 2-可以通过命令ts-node来执行ts文件 。
ts-node 2.ts

三.静态类型

1.数字类型（number）

const num:number = 1;

2.字符串类型（string）

let str:string = "1"

3.布尔类型（boolean）

let bool:boolean = false;

4.数组类型（array）

//数组可以分为string与number类型
    let arr1:string[] = ['1','2','3']
    let arr2:num:number[] = [1,2,3]

//元组类型可以用于表示元素类型不同的数组，但前提是你要知道元素的数量与类型。 如下，我定义了第一个    元素为`string`类型，第二个元素为`number`类型的元组
    let arr:[string,number] = ["abc",1]

//任意值类型（any） 当你数据类型不确定时，或者数组当中只知道部分元素的类型时，你就可以使用它了。
    let arr:any[] = [1,2,"one",true,function(){},{}];

5.任意值类型（any）

let ones:any = 1;
ones = '3'
ones = true

let tow = 2 
tow = '2'//报错

6.null与undefined

//`null`与`undefined`在学习`JS`时应该已经很熟悉了。关于`null`与`undefined`类型定义自身的这种行为，本身没有什么意义
let nu:null = null;
let nu2:null = 2;// 异常
let und:undefined = undefined

7.void类型

// void类型  `void`类型与`any`类型相反，它表示没有任何类型。声明一个`void`类型的变量是没有什么意义的，因为它的值只能是`undefined`和`null`.一半在声明函数时是否有返回值时使用
    function fn():void{
        // return undefined
    }
//不写void就必须要写return并且返回的数据类型要与声明的时候一致
    function fn():number{
         return 1
    }
    function fn():string{
         return '1'
    }

8.枚举(enum)

//枚举 `enum` 类型是对 JavaScript 标准数据类型的一个补充，使用枚举类型可以`为一组数值赋予友好的名字`。 如果在程序中能灵活的使用`enum`,会让程序有更好的可读性。 
// 1- 需要通过关键字enum来定义枚举
// 2- enum右侧即是枚举的名字
// 3- 枚举的命名规范：
//    3-1 枚举的名字首字母大写
//    3-2 枚举的名字以Enum结尾
//    3-3 枚举的成全要求全部大写，单词之间用_分割。

// 定义一个用于描述性别的枚举:NameEnum
// 成员的值默认从0依次递增。
    enum NameEnum{
        SEX,
        AGE
    }
    console.log(NameEnum.SEX,NameEnum.AGE);// 输出0 1
// 可以指定成员值 也可以手动改写
 enum NameEnum{
        SEX = 100,
        AGE
    }
    console.log(NameEnum.SEX,NameEnum.AGE);// 输出100 101

9.object

//object  表示非原始类型，也就是除 `number`，`string`，`boolean`之外的类型。
     console.log(typeof {});     // object
     console.log(typeof []);    // object
     console.log(typeof null);    // object
    const obj:{userName:string,age:number}={userName:"zhangsan",age:12};

10.联合类型（Union Types）

//联合类型 指定多个类型使用|进行分割，可以使用（）将其包裹
    let str:(string | number) = "abc";
    str = 100;
    str = true //报错

11.类型推断

//类型推断 TS会在没有明确的指定类型的时候推测出一个类型
    let str = '1'  //类型就为string
    let num = 1 // 类型就为number 
// 如果定义的变量未赋值，推断为any
    let str;
    str = 1;
    str = "abc"

12.类型断言  

//类型断言  通过*类型断言*这种方式可以告诉编译器 我知道是什么类型你不要操控了 交给我处理就可以了
    const arr:number[] = [1,2,3,4];
//因为可能返回的时undefined 所以会报错 但我们知道这个肯定有返回值所有就断言有number类型的返回值
    const num:number = arr.find(v=>v === 3) as number; //两种断言写法
    const num2:number = <number>arr.find(v=>v === 2);

总结

// TypeScript是静态类型:在声明变量或常量时需要指定类型
    let num:number = 1;
    let str:string = "1"
    let blo:boolean = true

//数组可以分为string与number类型
    let arr1:string[] = ['1','2','3']
    let arr2:num:number[] = [1,2,3]

//元组类型可以用于表示元素类型不同的数组，但前提是你要知道元素的数量与类型。 如下，我定义了第一个    元素为`string`类型，第二个元素为`number`类型的元组
    let arr:[string,number] = ["abc",1]

//任意值类型（any） 当你数据类型不确定时，或者数组当中只知道部分元素的类型时，你就可以使用它了。
    let arr:any[] = [1,2,"one",true,function(){},{}];

//null与undefined类型 无意义
    let nu:null = null;
    let und:undefined = undefined;

// void类型  `void`类型与`any`类型相反，它表示没有任何类型。声明一个`void`类型的变量是没有什么意义的，因为它的值只能是`undefined`和`null`.一半在声明函数时是否有返回值时使用
    function fn():void{
        // return undefined
    }
//不写void就必须要写return并且返回的数据类型要与声明的时候一致
    function fn():number{
         return 1
    }
    function fn():string{
         return '1'
    }

//枚举 `enum` 类型是对 JavaScript 标准数据类型的一个补充，使用枚举类型可以`为一组数值赋予友好的名字`。 如果在程序中能灵活的使用`enum`,会让程序有更好的可读性。 
// 1- 需要通过关键字enum来定义枚举
// 2- enum右侧即是枚举的名字
// 3- 枚举的命名规范：
//    3-1 枚举的名字首字母大写
//    3-2 枚举的名字以Enum结尾
//    3-3 枚举的成全要求全部大写，单词之间用_分割。

// 定义一个用于描述性别的枚举:NameEnum
// 成员的值默认从0依次递增。
    enum NameEnum{
        SEX,
        AGE
    }
    console.log(NameEnum.SEX,NameEnum.AGE);// 输出0 1
// 可以指定成员值 也可以手动改写
 enum NameEnum{
        SEX = 100,
        AGE
    }
    console.log(NameEnum.SEX,NameEnum.AGE);// 输出100 101

//object  表示非原始类型，也就是除 `number`，`string`，`boolean`之外的类型。
     console.log(typeof {});     // object
     console.log(typeof []);    // object
     console.log(typeof null);    // object
    const obj:{userName:string,age:number}={userName:"zhangsan",age:12};

//联合类型 指定多个类型使用|进行分割，可以使用（）将其包裹
    let str:(string | number) = "abc";
    str = 100;

//类型推断 TS会在没有明确的指定类型的时候推测出一个类型
    let str = '1'  //类型就为string
    let num = 1 // 类型就为number 
// 如果定义的变量未赋值，推断为any
    let str;
    str = 1;
    str = "abc"

//类型断言  通过*类型断言*这种方式可以告诉编译器 我知道是什么类型你不要操控了 交给我处理就可以了
const arr:number[] = [1,2,3,4];
//因为可能返回的时undefined 所以会报错 但我们知道这个肯定有返回值所有就断言有number类型的返回值
    const num:number = arr.find(v=>v === 3) as number; //两种断言写法
    const num2:number = <number>arr.find(v=>v === 2);

四.函数

1.参数类型注释      通过在参数后加冒号指定参数类型

// 声明函数1
const fn = function(a:number,str:string){

}
// 声明函数2
function fn2(a:number,str:string){

}
// 声明箭头函数
const fn3 = (num:number,str:string)=>{

}

2.函数返回值    形实参数量与类型需一致   

// 要求返回值的类型为number
 const fn = function(a:number,b:string):number{
     return 1;
 }
// 要求返回值的类型为string
 const fn1 = function(a:number,b:string):string{
     return 1;
 }
// 不限制返回值的类型
 const fn2 = function (a:number,b:string,c:number):any{
     return "1"
 }

// 不允许出现返回值
const fn3 = function():void{
    return 1;// 异常
}
fn(1,'1')
fn2(1,1)//异常
fn2(1,'1')//异常

3.可选参数、默认参数、剩余参数

//可选参数
function fn(a: number, b?: string,c:number): number {
    return 100;
}
fn(1, "abc");
fn(1);


 //默认参数
// 参数b如果未传递，那么默认为0
function fn(a:number,b:number=0):number{
    return a+b;
}
console.log(fn(1,2));// 3
console.log(fn(1));// 1

//使用....代表剩余
function fn(a:number,...lastNum:number[]):number{
    console.log(lastNum);
    return 100;
}
fn(1);
fn(1,2,3,4)

4.方法重载

函数重载是指同一个函数，根据传递的参数不同，会有不同的表现形式。注意在JS当中是不支持重载的。在TS中是提供了重载功能的，但是这个重载功能和C#或者java等语言的重载相比是不完整的。

     function fn(name:string):string;
     function fn(age:number):number;
     function fn(message:any):any{
        if(typeof message === "number"){
            console.log("年龄",message);
        }else if(typeof message == "string"){
            console.log("用户名",message);
        }
        return "abc";
    }
    const str:number = fn(1);

五.接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。

1.接口

// 接口是抽象表达的。
// 注意：接口的关键字--interface 
//      接口的名字一般以I开头。
interface Iperson{
    userName:string,
    sex:string,
    age:number
}
// 可以在对象名的右边加上:接口名字来使用接口
// 对象当中的属性类型一定要与接口指定的类型相同，否则有异常
// 对象当中不允许出现接口未定义的属性。
// 对象当中也不允许不写接口中定义的属性。
// （对象当中的属性一定要与接口一致）
const person:Iperson = {
    userName:"张三",
    sex:"男",
    age:18,
}


  // 对属性的类型是函数的进行约束 
    interface Iobj {
        userName:string,
        age:number,
        run:(a:string,b:number)=>string
    }
    const obj:Iobj = {
        userName:"张三",
        age:12,
        run(a:string,b:number){
            return "abc"
        }
    }
    console.log(obj.run("1",2))

2.可选属性与只读属性

   // 可以通过？设置是否为必写项
    interface Iperson{
        userName:string,
        sex:string,
        age?:number
    }
    const person:Iperson = {
        userName:"张三",
        sex:"男",
        age:18,
    }


 // 属性默认是可以进行读写的，在接口中如果增加readonly即可设置为只读属性
    interface Iperson{
        id:number,
        readonly userName:string,
        sex:string,
        age?:number
    }
    const person:Iperson = {
        id:100,
        userName:"张三",
        sex:"男",
        age:18,
    }
    console.log(person.userName);// ok
    const str:string = person.userName;// ok
    person.userName = "李四";// 异常

3.使用断言

 interface Iobj {
        userName:string,
        age:number
    }
// 可以使用断言1
     const obj = {} as Iobj;
     obj.userName = "张三";
     obj.age = 18;
 // 可以使用断言2
     const obj = {};
     (<Iobj>obj).userName = "张三";
     (<Iobj>obj).age = 18;
 // 可以直接为对象增加接口
    const obj:Iobj = {
        userName:"李四",
        age:17
    }
    obj.userName = "张三";
    obj.age = 18;

4.接口可以继承接口

// Ione继承Iwo接口
    interface Iwo {
        sex:string
    }
    interface Ione extends Iwo {
        id:number,
        userName:string
    }
    const obj:Ione = {
        id:100,
        userName:"张三",
        sex:"男"
    }

5.函数类型

interface Ifn {
    (userName:string,age:number):boolean
}
const run:Ifn = function(user:string,age:number):boolean{
    console.log(user,age);
    return true;
}
run("张三",18);

6.类实现接口

// 需要使用关键词implements    
    interface IBox{
        run():string,
        fn2():void
    }
    class Desk{
        fn(){
            console.log("fn");
        }
    }
    class Box  extends Desk implements IBox{
        run(): string {
            return "1"
        }
        fn2(): void {
            
        }
        fn3(){
            console.log("fn3");
        }
    }
    const box = new Box();
    box.fn();
    box.fn3();

7.接口继承接口

可以使用多个接口，多个接口用逗号进行分割。

 interface ITwo{
        fn5():number
    }
    interface IBox{
        run():string,
        fn2():void
    }
    class Desk{
        fn(){
            console.log("fn");
        }
    }
    // 可以使用多个接口
    class Box  extends Desk implements IBox,ITwo{
        run(): string {
            return "1"
        }
        fn2(): void {
            
        }
        fn3(){
            console.log("fn3");
        }
        fn5(): number {
            return 12
        }
    }
    const box = new Box();
    box.fn();
    box.fn3();
王小白--
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
TypeScript 基础 — Null 和 Undefined
lio-zero 的博客
04-09 2430
null 和 undefined 都有各自的类型名称。这些类型本身没有用处，因为我们只能将 null 和 undefined 赋值给定义为 null 或 undefined 类型的变量。 let u: undefined = undefined u = 'string' // compile error let n: null = null n = 43 //compile error 默认情况...
TypeScript系列之类型 undefined
老__L的博客
09-27 1024
/ 输出 undefined// 输出 pidancode.com 100 true undefined// undefined 类型只能被赋值为 undefined
TypeScript中的undefined,void,null
m0_45093055的博客
12-05 760
例如，当检查变量是否被定义或初始化时，通常使用undefined。undefined是一个全局变量，表示未定义或未赋值，可以被覆盖。在函数中，如果您已声明但未返回任何值，则默认返回undefined。null是一个表示无值或空值的JavaScript原始值，与未定义和未赋值的区别。如果要显式设置变量或属性不含任何值，可以将其设置为null。undefined的本质是一个变量定义但是没有赋值，如果let x:undefined = undefined这种方式赋值之后，就不能赋值成其它类型。
TypeScript 基础类型 —— Null 和 Undefined
且听风吟的博客
05-31 1882
声明为 Null 类型表示对象值缺失； 声明为 Undefined 类型表示一个未定义的值。
typescript基础之null和undefined
hhbbeijing的专栏
08-18 1602
运算符来访问一个可能为null或undefined的对象的属性或方法，因为它会避免抛出TypeError异常，而是返回undefined，这样我们可以更容易地处理错误情况。• null和undefined在值上也是不同的，null表示一个空值，而undefined表示一个未知的值。• 我们应该尽量使用===运算符来比较null和undefined，因为它会保持它们的类型和值不变，避免一些隐式的类型转换和意外的结果。• null表示一个空或不存在的对象，它是一个字面量，可以直接赋值给变量或常量。
零基础入门TypeScript详细教程
最新发布
12-15
零基础入门TypeScript详细教程
TypeScript 快速入门
01-26
W3C school 的 TypeScript 快速入门 整理，这个是Word版本，有文档结构标签。TypeScript 的版本是2.0
TypeScript 入门教程
01-06
TypeScript 入门教程.
TypeScript入门指南案例教程.zip
07-17
TypeScript入门指南案例教程，让您更快了解TypeScript
TypeScript 入门教程.pdf
05-09
TypeScript 入门教程
let和var的区别（结论）
Demon's blog
08-24 219
1.块级作用域 ES5只有全局作用域和函数作用域，没有块级作用域，ES6新增了let命令用于声明变量，类似于var但是let声明的变量只能在let命令所在的代码块内有效。 2.变量提升 var定义的变量会发生变量提升现象，即变量可以在申明之前被使用，值为undefined，let命令定义的变量必须在声明明之后使用，否则报错 3.重复声明，var可以重复声明，let不可以重复声明 ...
关于TypeScript中null,undefined的使用
kuangben2000的博客
08-30 3902
关于TypeScript中null,undefined的使用 https://www.cnblogs.com/ServiceboyNew/p/3590249.html TypeScript本质是javascript，因此基本上js所有的功能在ts上完全可以照搬照抄过来使用。根据ts的文档，有些我觉得值得商榷的——比如null,undefined就是例子。 文档上说一个变量如果是number,boolean等基本类型，可以为null或者是undefined。在我看来，既然TS是“强语言”类型，我们.
TypeScript基本信息总结
weixin_55181759的博客
10-19 746
return x + y } console . log(add(1 , 2)) // 输出3抽象类不能被实例化，只能被继承。} const person = new Person('why') console . log(person . name) // why const animal = new Animal() // 编译报错抽象类中的抽象方法必须被子类实现。// 子类必须实现抽象类中的抽象方法 eat() {
TypeScript学习笔记（一）
HYY的博客
03-19 5066
TS学习笔记 文章目录TS学习笔记一. 环境搭建二. 基本类型1. 类型声明2. 基本类型三. 编译选项四. Webpack + TS（一）基础配置1. 配置依赖2. webpack.config.js3. tsconfig.json4. 构建指令配置（二）清除旧的打包产物五. class0. 基础使用1. 构造函数&this2. 继承3. 抽象4. 接口5. 属性封装6. 泛型 一. 环境搭建 安装Node.js npm i -g typescript 创建ts文件test.ts，编译：tsc
TypeScript：let
风静如云的博客
02-15 1290
使用let可以定义块作用域变量，在块外是无法访问的；在同一个作用域内不能定义两个相同的变量；在定义变量之前无法访问变量： console.log(a);//在定义前使用，ts会报错 let a = true; function f() { let a = 0; if(a == 0) { let a = "hello"; console.log(a);//输出hello } console.log(a);//输出0 } f(); console.log(a);//输出true 以下引用
【TypeScript】中定义变量方式 | 数据类型详解
m0_71485750的博客
08-16 2969
我在前面强调过，在TypeScript中定义变量需要指定标识符的类型。所以完整的声明格式如下：声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解；var/let/const 标识符: 数据类型 = 赋值;比如我们声明一个message，完整的写法如下：注意：这里的string的首字母是小写的，和String是有区别的string是TypeScript中定义的字符串类型， String是JavaScript的字符串包装类的类型。......
TypeScript的常用语法之基础类型
qq_45666837的博客
06-30 221
基础类型 TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。 布尔值 最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean（其它语言中也一样）。 let flag: boolean = false; flag = true; console.log(flag) 数字 和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 num
TypeScript-null和undefined
lihui61357457的博客
06-07 826
详情可见
TypeScript 类型声明书写踩坑全解析
小青蛙的博客
06-12 9906
本文总结了TypeScript类型声明的书写，很多时候写TypeScript不是问题，写类型就特别纠结，我总结下，我在使用TypeScript中遇到的问题。如果你遇到类型声明不会写的时候，多看看lodash的声明，因为lodash对数据进行各种变形操作，所以你能遇到的，都有参考示例。 基本类型 // 变量 const num: number = 1; const str: string = 'str'; const bool: boolean = true; const nulls: null.
如何快速入门typescript
06-06
要快速入门 TypeScript，可以按照以下步骤进行： 1. 了解 TypeScript 的基础知识，例如类型注解、接口、类等。 2. 安装 TypeScript 编译器，可以使用 npm 包管理器安装。 3. 创建一个 TypeScript 项目，可以使用命令行工具或者 IDE 创建。 4. 编写 TypeScript 代码，可以使用 Visual Studio Code 等编辑器。 5. 编译 TypeScript 代码，将 TypeScript 代码编译成 JavaScript 代码，可以使用命令行工具或者 IDE 中的编译器。 6. 运行 JavaScript 代码，将编译后的 JavaScript 代码运行在浏览器或者 Node.js 环境中。 同时，还可以参考官方文档、书籍和教程等资源，加深对 TypeScript 的理解和应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值