Home Web Front-end JS Tutorial Share some tips on TypeScript

Share some tips on TypeScript

May 17, 2018 pm 02:16 PM
typescript Skill renew

Compile TypeScript (hereinafter referred to as ts) in a C++ project

Edit the properties of the ts file and select "Custom Production Tool" as the item type.

Enter the location of tsc and compilation parameters on the command line. Mine is "C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.2\tsc" %(Identity) --outFile %(RelativeDir)/ %(FileName).js -t es5. UNC (Universal Naming Convention) with spaces needs to be enclosed in double quotes. %(Identity) is the location of the compiled file.

  --outFile is the output parameter, followed by the output location.

-t(--target) is the target type, I use ES5, it can also be "ES3" (default), "ES5", "ES6"/"ES2015", "ES2016", "ES2017" or "ESNext".

Instructions: Just write %(Identity), this is optional.

The output is written as $(FileName).js. This should be used to determine the necessity of compilation.

ps: This is the method I researched, and I feel there is a more standard one. The official did not introduce how to compile in a c++ project.

Quoting the statement of jquery in ts

jquery is not written in ts, so the ts file cannot be found on git. Fortunately, vs provides powerful support for jquery If you create a new html file of any project type and include a js file of any version of jquery, your smart prompt will automatically support $. Next, position the mouse to the left or right of $ and press F12 to view the definition, and it will automatically go to the index.d.ts file. Right-click the label and select Open Directory to find the file and copy it to your own project directory.

Use triple slash syntax to reference the current ts file ///

The .d.ts file is a declaration file, and There is no logical code, just structure.

How to generate a declaration file for your own ts file

Same as before, the tsc compiler can generate a declaration file, only the parameter -d/--declaration is required and ts files.

For example: tsc -d main.ts

Compile ts files using the command line?

Yes, as long as you don’t mind it. The Developer Command Prompt for VS 2017 of VS can use the tsc command directly. You can pin it to the Start screen to improve startup efficiency.

How to solve the problem of not getting the statement

  declare var swal: (arg: any) => any;
Copy after login

Add that you have a function like swal that does not provide a ts statement, so you can use it freely . Of course, this is a misuse of parameters.

The HTMLElement.remove member in ts does not exist. You can only use the removeChild of its parent object, which is not very convenient.

dom:HTMLElement;

  (<any>dom).remove();// 就这样勉强的转为any再调用remove吧。
Copy after login

No need to create a class for each object

ts class does not support internal declare class. Therefore, it is not appropriate to declare the member type outside the class.

  class foo{
    member:{mem1:number, mem2?:string};// 加问号表示可有可无  }
Copy after login

In this way, member is similar to an inner class.

Event subscription and this parameter

  class bar{
    sub(){
      dom.onclick=function(){this};
    }
  }
Copy after login

In this way, this in the function function is the dom object.

 dom.onclick=()=>{this};

This this represents an instance of class bar.

Then I want to have the dom object and the bar instance?

Currently I can only use closures:

  class bar{
    click(node:HTMLElement, ev:MouseEvent){
      this...
    }
    dom.onclick = (ev:MouseEvent)=>this.click(dom,ev);
  }
Copy after login

The dom is passed in with a closure. This is still the this you expect. After all, click is a member function of bar.

Do not use readonly for read-only properties

If you want to modify it, readonly is not convenient for internal access of the class

So you should use Object.defineProperty,ts There are more convenient set/get operation attributes.

  class baz{
    _attr:[];
    get attr(){
      return _attr;
    }
  }
Copy after login

In this way attr can only be read. To use the attribute feature, you need to set the target option (-t/--target) of the ts compiler to es5 or above.

This article will continue to be updated. I will update it as long as it is related to ts skills. If you also pay attention to typescript technology, please follow me/favorite this article.

btw: cnblogs does not support ts code coloring, and uses JS code coloring.

The above is the detailed content of Share some tips on TypeScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

Win11 Tips Sharing: Skip Microsoft Account Login with One Trick Win11 Tips Sharing: Skip Microsoft Account Login with One Trick Mar 27, 2024 pm 02:57 PM

Win11 Tips Sharing: One trick to skip Microsoft account login Windows 11 is the latest operating system launched by Microsoft, with a new design style and many practical functions. However, for some users, having to log in to their Microsoft account every time they boot up the system can be a bit annoying. If you are one of them, you might as well try the following tips, which will allow you to skip logging in with a Microsoft account and enter the desktop interface directly. First, we need to create a local account in the system to log in instead of a Microsoft account. The advantage of doing this is

Windows cannot access the specified device, path, or file Windows cannot access the specified device, path, or file Jun 18, 2024 pm 04:49 PM

A friend's computer has such a fault. When opening "This PC" and the C drive file, it will prompt "Explorer.EXE Windows cannot access the specified device, path or file. You may not have the appropriate permissions to access the project." Including folders, files, This computer, Recycle Bin, etc., double-clicking will pop up such a window, and right-clicking to open it is normal. This is caused by a system update. If you also encounter this situation, the editor below will teach you how to solve it. 1. Open the registry editor Win+R and enter regedit, or right-click the start menu to run and enter regedit; 2. Locate the registry "Computer\HKEY_CLASSES_ROOT\PackagedCom\ClassInd"

A must-have for veterans: Tips and precautions for * and & in C language A must-have for veterans: Tips and precautions for * and & in C language Apr 04, 2024 am 08:21 AM

In C language, it represents a pointer, which stores the address of other variables; & represents the address operator, which returns the memory address of a variable. Tips for using pointers include defining pointers, dereferencing pointers, and ensuring that pointers point to valid addresses; tips for using address operators & include obtaining variable addresses, and returning the address of the first element of the array when obtaining the address of an array element. A practical example demonstrating the use of pointer and address operators to reverse a string.

Windows permanently pauses updates, Windows turns off automatic updates Windows permanently pauses updates, Windows turns off automatic updates Jun 18, 2024 pm 07:04 PM

Windows updates may cause some of the following problems: 1. Compatibility issues: Some applications, drivers, or hardware devices may be incompatible with new Windows updates, causing them to not work properly or crash. 2. Performance issues: Sometimes, Windows updates may cause the system to become slower or experience performance degradation. This may be due to new features or improvements requiring more resources to run. 3. System stability issues: Some users reported that after installing Windows updates, the system may experience unexpected crashes or blue screen errors. 4. Data loss: In rare cases, Windows updates may cause data loss or file corruption. This is why before making any important updates, back up your

How to update TikTok to the latest version How to update TikTok to the latest version Mar 27, 2024 am 11:06 AM

1. Open the Douyin app, click [Me] in the lower right corner, and click the [Three Stripes] icon in the upper right corner. 2. Select [Settings], click to enter the settings interface, find and click [General Settings]. 3. Pull down on the general settings interface, find and click [Check for Updates]. 4. If the version currently used by the user is not the latest version, an update prompt for the new version will appear. Click [Upgrade]. 5. Wait for the installation package to be downloaded. The system will automatically install it. Click [Continue Installation]. 6. If the current version is already the latest version, a prompt of "No update version available" will appear.

Outlook stuck updating inbox; Outlook stuck updating inbox; Mar 25, 2024 am 09:46 AM

When Outlook has problems updating your inbox, it can affect productivity. This article will introduce some simple troubleshooting steps to help you solve the problem and get Outlook back to normal. Why is Outlook always stuck updating the inbox? Outlook may be stuck updating the inbox. Common reasons include network problems, excessive mailbox capacity, and the impact of anti-virus software or firewalls. Corrupted external plug-ins or data files can also cause this to happen. Next, we'll explore these possible causes in detail and provide solutions. Fix Outlook Stuck Updating Inbox If Outlook is unable to update your inbox, please refer to the solutions listed below: Restart Outlook Disabled

VSCode Getting Started Guide: A must-read for beginners to quickly master usage skills! VSCode Getting Started Guide: A must-read for beginners to quickly master usage skills! Mar 26, 2024 am 08:21 AM

VSCode (Visual Studio Code) is an open source code editor developed by Microsoft. It has powerful functions and rich plug-in support, making it one of the preferred tools for developers. This article will provide an introductory guide for beginners to help them quickly master the skills of using VSCode. In this article, we will introduce how to install VSCode, basic editing operations, shortcut keys, plug-in installation, etc., and provide readers with specific code examples. 1. Install VSCode first, we need

See all articles