Next-tsc NPM | npm.io

next-tsc

Use TypeScript with TypeScript compiler (tsc) in Next.js.

Features

next-tsc is to provide TypeScript build system for Next.js using TypeScript compiler (tsc) via ts-loader.

What is the issue of next-typescript?

Next.js provides official TypeScript plugin next-typescript. next-typescript had used ts-loader depends on webpack for old Next.js, but this uses Babel (@babel/preset-typescript) instead since Next.js 7.

Babel 7 supports to build TypeScript files without type checkings and it does not depend on other TypeScript tools such as tsc. In order to be simpler build systems in Next.js, Next.js 7 uses Babel 7 and latest next-typescript drops ts-loader and uses it instead.

However TypeScript build system of Babel has an issue. This issue is not critical, but very annoying. The issue is Babel throws warnings when re-exporting interfaces, types, and others like the following.

// src/models/user.ts
export interface UserModel {
  id: number;
  name: string;
}
export const createUser = (id: number, name: string) => ({ id, name });

// src/models/index.ts
export { UserModel, createUser } from "./user";

// src/main.ts
import { UserModel } from "./models";
...

[warning] in ./src/models/index.ts
"export 'UserModel' was not found in './user'

On large project, developers create index.ts to encapsulate the API calls from the web application into a single folder. If you define some interfaces and re-export them, you will get too many warnings.

The GitHub issue: next-typescript uses ts-loader again · Issue #306 · zeit/next-plugins

Why the issue is not fixed?

TypeScript build system of Babel does not support re-export (https://github.com/babel/babel/issues/8361#issuecomment-428756919).

To solve the issue, next-typescript should use ts-loader again, but it is breaking change.

Quick Start

Requirements

npm or Yarn
webpack 4.0.0 or higher

Installation

$ npm install --save -D next-tsc

If you are using Yarn, use the following command.

$ yarn add --dev next-tsc

Setup

First, setup your Next.js settings.

// next.config.js
const withTypeScript = require("next-tsc");

module.exports = withTypeScript();

You should set noEmit to false or remove the property in tsconfig.json .

{
  "compilerOptions": {
    ...
    "noEmit": false, // or remove this property
    ...

Contributing to next-tsc

Bug reports and pull requests are welcome on GitHub at https://github.com/jagaapple/next-tsc. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Please read Contributing Guidelines before development and contributing.