Ts 入门

草莓千层蛋糕
120 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。(juejin.cn/post/705288… "juejin.cn/post/705288…

1. 运行环境

  • 安装node.js
  • vscode

setting quote image.png

缩进改为2

image.png

安装插件prettier

image.png

image.png

转换为js 代码

image.png

在原有的基础上安装ts 就会安装最新的

image.png

npm install typescript -g //全局安装
tsc --version //查看版本

image.png

  • 测试ts

image.png

image.png tsc 文件.js 报错

1.管理员身份运行vs code

2.在终端执行：get-ExecutionPolicy，显示Restricted

3.在终端执行：set-ExecutionPolicy RemoteSigned

4.在终端执行：get-ExecutionPolicy，显示RemoteSigned

使用 tsc 命令转成 js 文件

image.png

编译成功 导入到index。html 在浏览器打开 image.png

编译时报错：

image.png

ts 文件会存在同一个作用域

image.png

加上export {} 文件独立作用域

image.png

搭建ts运行环境

image.png

1.安装ts-node

npm install ts-node -g

还依赖两个包

npm install tslib @types/node -g

2.第二种webpack运行： cmd 一定要管理员身份打开 不然会报错！！！

image.png

npm install webpack -g

npm install webpack-cli -g

进入到webpack文件夹 npm init

 npm install webpack webpack-cli -d

本地安装

image.png

image.png

npm install ts-loader typescript -D

生成配置文件：

image.png tsc --init

接口 interfaces

enum 迭代类型：

image.png

定义一个对象保存：

image.png

等同于：

image.png

他们的下标是 0 1 2

image.png

也可以改变默认值

image.png

注意：

image.png

函数的泛型

//需求 规定两个参数只能穿字符串 或者是 数字
// function join(first: string | number, second: string | number) {
//   return `${first}${second}`;
// }
// join("s", 2);
// join(2, 2);
// join("df", "df");

function join<ABC>(first: ABC, second: ABC) {
  return `${first}${second}`;
}
join<string>("sd", "dfs");
join<number>(12, 12);

// 输入的参数为数组 内容为字符串
function map<ABC>(params: ABC[]) {
  return params;
}
map<string>(["123"]);
// map<string>([123]); 报错
//等价于：
function mapSecond<ABC>(params: Array<ABC>) {
  return params;
}
mapSecond<string>(["123"]);

// 一般用T代表泛型

// 定义多个泛型

function foo<T, P>(first: T, second: P) {
  return `${first}${second}`;
}

foo(1, "1"); // 可以不用加说明 js底层会推断出
foo<number, string>(12, "xczxc");

function fooOne<T, P>(first: T, second: P): P {
  return second;
}

fooOne(1, 12);
fooOne("sds", "sdas");
fooOne("sds", 154);

类里面的泛型：

image.png

命名空间：(类似于模块化 把需要用到的内容封装在一起去 把最核心的暴露出去 )

运行在浏览器中：

1.创建ts文件夹

2.npm init -y

3.tsc -init 创建出 tsconfig.json

4.src 下创建 src文件夹 再添加 page.ts文件（打印abc） src下创建dist文件夹 5.根目录下 添加index.html 引入

6.最后在 tsconfig.json 打开 输入 输出的地址：

image.png

最后在控制台 tsc 跑起来 右击index.html 在浏览器上看到

image.png

修改一次 page.ts 就需要 tsc 一次 采用tsc -w 只要有改动 就会监听 自动编译成js文件

// console.log('abc');


class Header{
   constructor(){
       const elem = document.createElement('div');
       elem.innerText = "This is Header";
       document.body.appendChild(elem)
   }
}


class Content{
    constructor(){
        const elem = document.createElement('div');
        elem.innerText = "This is Content";
        document.body.appendChild(elem)
    }
 }

 
 class Footer{
    constructor(){
        const elem = document.createElement('div');
        elem.innerText = "This is Footer";
        document.body.appendChild(elem)
    }
 }
 

 class Page{
     constructor(){
         new Header()
         new Content()
         new Footer()
     }
 }

image.png

太多全局变量了 只需要 暴露Page

引入namespace：

// console.log('abc');


namespace Home {
    class Header{
        constructor(){
            const elem = document.createElement('div');
            elem.innerText = "This is Header";
            document.body.appendChild(elem)
        }
     }
     
     
     class Content{
         constructor(){
             const elem = document.createElement('div');
             elem.innerText = "This is Content";
             document.body.appendChild(elem)
         }
      }
     
      
      class Footer{
         constructor(){
             const elem = document.createElement('div');
             elem.innerText = "This is Footer";
             document.body.appendChild(elem)
         }
      }
      
     
    export class Page{
          constructor(){
              new Header()
              new Content()
              new Footer()
          }
      }
     
     
      
}

编译后的js文件：

"use strict";
// console.log('abc');
var Home;
(function (Home) {
    class Header {
        constructor() {
            const elem = document.createElement('div');
            elem.innerText = "This is Header";
            document.body.appendChild(elem);
        }
    }
    class Content {
        constructor() {
            const elem = document.createElement('div');
            elem.innerText = "This is Content";
            document.body.appendChild(elem);
        }
    }
    class Footer {
        constructor() {
            const elem = document.createElement('div');
            elem.innerText = "This is Footer";
            document.body.appendChild(elem);
        }
    }
    class Page {
        constructor() {
            new Header();
            new Content();
            new Footer();
        }
    }
    Home.Page = Page;
})(Home || (Home = {}));

image.png

只有Page是全局变量了 image.png

header Content footer跟 Page 写在一起了 现在需要分开写：

把header Content footer 写在components.ts中：

namespace Components {
 export class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Header";
      document.body.appendChild(elem);
    }
  }

  export class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Content";
      document.body.appendChild(elem);
    }
  }

  export class Footer {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Footer";
      document.body.appendChild(elem);
    }
  }
}

page.ts

// console.log('abc');


namespace Home {     
    export class Page{
          constructor(){
              new Components.Header()
              new Components.Content()
              new Components.Footer()
          }
      }
     
     
      
}

image.png

但是 我们只想打包在一个文件 怎么办？

开启 outFile：指定一个将所有输出捆绑到一个JavaScript文件中的文件。

image.png

把dist 目录删除

编译后的js：

"use strict";
var Components;
(function (Components) {
    class Header {
        constructor() {
            const elem = document.createElement("div");
            elem.innerText = "This is Header";
            document.body.appendChild(elem);
        }
    }
    Components.Header = Header;
    class Content {
        constructor() {
            const elem = document.createElement("div");
            elem.innerText = "This is Content";
            document.body.appendChild(elem);
        }
    }
    Components.Content = Content;
    class Footer {
        constructor() {
            const elem = document.createElement("div");
            elem.innerText = "This is Footer";
            document.body.appendChild(elem);
        }
    }
    Components.Footer = Footer;
})(Components || (Components = {}));
// console.log('abc');
var Home;
(function (Home) {
    class Page {
        constructor() {
            new Components.Header();
            new Components.Content();
            new Components.Footer();
        }
    }
    Home.Page = Page;
})(Home || (Home = {}));

合并在一起了

//Components与page 相互引用的声明 ///

/// <reference path='./components.ts'/>

image.png

命名空间还可以定义其他的类型

image.png 也是可以定义子的namespace image.png

image.png

import 模块化引入

page.ts

import {Header ,Content ,Footer} from './components'

export default class Page {
  constructor() {
    new Header();
    new Content();
    new Footer();
  }
}

components.ts

export class Header {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "This is Header";
    document.body.appendChild(elem);
  }
}

export class Content {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "This is Content";
    document.body.appendChild(elem);
  }
}

export class Footer {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "This is Footer";
    document.body.appendChild(elem);
  }
}

amd 模块 浏览器是不支持的 需要用到require.js

image.png

image.png require.js地址 ：www.bootcdn.cn/require.js/

image.png


        require(['page'],function(page){
            new page.default()
        })

image.png

parcel

github: github.com/parcel-bund… 中文文档： www.parceljs.cn/getting_sta…

安装：

npm install -D  parcel-bundler

目录结构：

image.png

image.png

npm run test

image.png

avatar
文章
阅读
粉丝