一小时入门TypeScript-基础篇

作者: 彬哥头发多 | 来源:发表于2018-04-10 21:34 被阅读196次

+TypeScript简介

1.比javascript更强大的开源语言，简称TS，亲爸是微软。

2.官网

英文官网：https://www.typescriptlang.org 推荐

中文官网：https://www.tslang.cn

最新版本2.8，推荐编辑器VSCode

3.为什么学它？

a)钱景不错

b)前景不错

Egret

Angular

c)学它能够让我们顺带着学习了ES6&ES7

d)了解后台语言，是面试了解一门后台语言的最佳入口和与后台协作更顺畅

e)用熟了大幅度提升工作效率和代码体验，用TS真太特么爽了

4.难度

a)学习资料少

b)使用很多后台语言概念和思想，如强类型、泛型，接口，枚举，这都啥B玩意

c)绝对是好东西，但是需要经验，没有OOP开发经验玩不转，java和javascript的杂交串儿

+TypeScript编译环境安装

1.安装NPM  https://nodejs.org/en/ 使用LTS版本

下面要注意学习，进入正课，敲黑板划重点。

TS编译环境安装：

2.npm install -g typescript

写helloworld.ts

//3.写helloworld.ts
function greeter(person) {
    return "Hello, " + person;
}

let user = "big bin brother";

编译，命令行

tsc helloworld.ts

TypeScript 项目设置

tsc --init

创建second.ts,并编译

tsc

+TypeScript 编译文件和输出配置

打开tsconfig,文件，修改files和outDir

{
  "compilerOptions": {
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true 
  },
  "files":[
    "main.ts"
  ]
}

+跟THML结合输出

推荐使用easyServer,调试，直接上index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <script src="dist/app.js"></script>
</body>
</html>

+TS数据类型

js数据类型，先玩一把。let ->var,const - >var直接写var更没问题,

javascript里面：

usbno,在ts里面依然有，type.ts走起。

弱类型的缺点，新建文档type2.ts

let number = 12;
number+='5';
//结果125
现在，直接错误提示

ts.config 设置，noEmitOnError。不输出

更强的类型检查

function showAge(age:number){
    return age;
}

console.log(showAge('12'));

好处：1.扼杀错误在摇篮之中2.性能棒棒哒

开始说TS显式定义,

let username:string = "big bin brother";
let age:number = 12;
let isHandsome:boolean = true;
let girlFriend:object = {
    "name":"如花",
    "age":18
};
let arrStudent = ["狗剩","二蛋","三娃","百万","富贵"];

重点说下数组,跟js很不一样。

let arrStudent = ["狗剩","二蛋","三娃","百万","富贵"];
arrStudent.push(12);

注意强类型不能这样掺合，只能同类型添加，比如显式定义数组里面必须都是string，其它类型就废了。

let arrStudent2:string[] = ["狗剩","二蛋","三娃","百万","富贵",666];//只能是string,否则报错

数字同理，

let arrAges:number[] = [12,5,8,'99'];

想男女混合双打咋整，

let mixArray:(number|string)[] = [12,5,8,'99'];

当然还有any类型，这孙子就跟js一样了，数据随便装，很不推荐使用。

let arrAges:any[] = [12,5,8,'99'];

下面说一个枚举，这货是TS的东西，ES6和js都么有，这货有啥用？

enum Direction {
    Up = 38,
    Down,
    Left,
    Right,
}
//生肖，扑克牌，麻将
function play(dir: Direction){
    // ...
    if(dir==38){
        console.log('向下按了');
    }else{
        console.log(dir);
    }
}
//play(38);
play('fdasfas');

有两个好处，因为方向我是用的键码值，比如方向左键是37，所以你输入乱七八糟的类型直接编辑器报错，

定义只需要写一个比较简便，比如你写星期就不用写7个，定义星期一就自动往下排。

这里注意，我在函数中使用了类型限制dir: Direction，

参数用法跟变量很类似，如下：

没毛病，

function sayHello(person:any) {//any的以意思是输入参数类型随意
    return "Hello, " + person;
}

console.log(sayHello('dabinge'));

这样写，不是数字就挂了

function showAge(age:number) {
    return "big bin brother今年, " + person+"了";
}

console.log(showAge('18'));

整个复杂点的，不过一看就懂，

function showInfo(name:string,age:number){
    return name+"今年, " + age+'岁了';
}

console.log(showInfo('leo',18));

说完了参数，咱们说说，返回值，跟参数一样，唯一要注意的就是void代表无返回值，比如这样就是错的。

function showInfo(name:string,age:number):void{
    return name+"今年, " + age+'岁了';//不允许返回
}

因为泛型用的不多，这里讲了反而让大家晕头转向，所以暂时理解这么多就够了。下面我说一个TS中99级的神器--类，有了它，妈妈再也不用担心你的编程了，就因为有了类，隔壁二狗子都找到女朋友了，所以大家一定要学好。

class是啥玩意，为啥用它，class就是一个收纳箱，你女朋友要来你家吃饭，你的房间脏乱差，这里一只袜子那里一只破鞋，你买来一堆收纳箱，先别说整理，至少你扔进去以后摞起来，起码看起来看着很工整。

所以class的一个非常显著的效果就是能够让你写的代码非常的整洁，当然如果你用的好的话能大幅提高你的开发效率，没啥神奇的，你如果收纳做的好，你能迅速地找到第几个箱子的第几层放着你夏天穿的衣服。

不扯没用的，先上一梭子代码再说。

class Person{
    name:string;
    age:number;
    //构造函数，人生下来，年龄就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
}
//1.啥也别说先造个人再说

var dabinge = new Person('大彬哥',18);
console.log(dabinge.age);//18

作为一个有追求老师，大彬哥不能只有年龄和名字，还得有点高大上的追求，比如能吃。大彬哥就爱吃剁椒鱼头。

class Person{
    name:string;
    age:number;
    food:string = "剁椒鱼头";//外面赋值这里赋值一码事
    //构造函数，人生下来，年龄就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //favoriteFood 大彬哥就特么爱吃鱼
    favoriteFood(){
        return this.food;
    }
}
//1.啥也别说先造个人再说

var dabinge = new Person('大彬哥',18);
console.log(dabinge.favoriteFood());//

我为啥能吃剁椒鱼头呢，因为我帅，当然了一般情况下不能靠刷脸，得靠软妹币，你们是不是想知道大彬哥有多少软妹币啊，这事儿吧，我自己知道就行了，不像年龄和姓名可以公开（public），而是我的隐私，所以你问我我肯定不告诉你对吧。

class Person{
    name:string;
    age:number;
    food:string = "剁椒鱼头";//外面赋值这里赋值一码事
    private money:number = 10000000000000;//别激动，肯定不是中国天堂银行发行的
    //构造函数，人生下来，年龄就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么爱吃鱼
    favoriteFood(){
        return this.food;
    }
}
//1.啥也别说先造个人再说
var dabinge = new Person('大彬哥',18);
//2.想问我多大撩我或者请我吃饭问我爱吃啥我肯定告诉你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想问我银行卡里有多少钱？我肯定不告诉你
console.log(dabinge.money);

但是问题来了，别人不能看，我自己得能往里面存啊，虽然大彬哥不差钱，但是赚钱也得存卡里对吧。

class Person{
    name:string;
    age:number;
    food:string = "剁椒鱼头";//外面赋值这里赋值一码事
    private money:number = 10000000000000;//别激动，肯定不是中国天堂银行发行的
    //构造函数，人生下来，年龄就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么爱吃鱼
    favoriteFood(){
        return this.food;
    }
    makeMoney(salary:number):number{
       return  this.money+=salary;
    }
    //我自己被窝偷着乐，数1后面的0
    touZheLe(){
        return this.money;
    }
}
//1.啥也别说先造个人再说
var dabinge = new Person('大彬哥',18);
//2.想问我多大撩我或者请我吃饭问我爱吃啥我肯定告诉你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想问我银行卡里有多少钱？我肯定不告诉你
// console.log(dabinge.money);
// 大彬哥每个月工资不是很多998
dabinge.makeMoney(998);
//4.我自己在被窝可以偷着看自己余额，通过偷着乐函数看私有属性
console.log(dabinge.touZheLe());//10000000000998

那我有这么多钱，数的我手都没指纹了也数不完，万一哪天我挂了总不能给我烧了吧，咋整，给我儿子一部分呗。我们聊聊继承的问题。

class Person{
    name:string;
    age:number;
    food:string = "剁椒鱼头";//外面赋值这里赋值一码事
    private money:number = 10000000000000;//别激动，肯定不是中国天堂银行发行的
    //构造函数，人生下来，年龄就定了
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    //eat 大彬哥就特么爱吃鱼
    favoriteFood(){
        return this.food;
    }
    makeMoney(salary:number):number{
       return  this.money+=salary;
    }
    //我自己被窝偷着乐，数1后面的0
    touZheLe(){
        return this.money;
    }
}
//1.啥也别说先造个人再说
var dabinge = new Person('大彬哥',18);
//2.想问我多大撩我或者请我吃饭问我爱吃啥我肯定告诉你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想问我银行卡里有多少钱？我肯定不告诉你
// console.log(dabinge.money);
// 大彬哥每个月工资不是很多998
dabinge.makeMoney(998);
//4.我自己在被窝可以偷着看自己余额，通过偷着乐函数看私有属性
console.log(dabinge.touZheLe());//10000000000998

class bingeSons extends Person{
    isHandsome:boolean = true;
    constructor(name:string,age:number){
        super(name,age);//都是我的老底儿，姓名年龄cls
    }
}
let binSon = new bingeSons('彬哥2.0',18);
console.log(binSon.food);//我儿子钱都到手了

但是我说了，我说了是一部分给我儿子，而不是全部，下一期我们将要讲关于大彬哥财产捐献之慈善基金会和针对不同人分配问题。在下次教程中我将重点讲述接口，范型，命名空间，以及模块化管理，并讲ts在框架和工作流中的应用。敬请期待。

一小时入门TypeScript-基础篇

+TypeScript简介

+TypeScript编译环境安装

+TypeScript 编译文件和输出配置

+跟THML结合输出

+TS数据类型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端开发

TypeScript 极简教程

TypeScript基础

让前端飞

Web前端之路

我爱编程

TypeScript